<template>
  <!-- 首次设置密码 -->
  <Modal
    :title="title"
    v-model="modal"
    :mask-closable="false"
    :closable="!isForce"
    @on-cancel="onClose"
    width="540">
    <div style="padding: 0 16px">
      <div
        style="
          display: flex;
          margin-bottom: 20px;
          background: #fefcec;
          width: fit-content;
          padding: 5px;
          line-height: 30px;
        ">
        <Icon type="md-warning" :size="20" color="#FF7840" style="margin: 4px 6px" />
        <p style="color: #ff7840; margin-right: 20px">密码长度需8-18位的数字、字母，且字母必须包含大小写</p>
      </div>

      <Form ref="form" :model="info" :rules="rules" label-position="top">
        <FormItem label="新密码" prop="password">
          <Input
            v-model="info.password"
            autocomplete="new-password"
            type="password"
            placeholder="密码长度需8-18位的数字、字母，且字母必须包含大小写" />
        </FormItem>
        <FormItem label="确认新密码" prop="confirmPwd">
          <Input
            v-model="info.confirmPwd"
            type="password"
            placeholder="密码长度需8-18位的数字、字母，且字母必须包含大小写" />
        </FormItem>
      </Form>
    </div>
    <template #footer>
      <Button @click="onClose">{{ isForce ? '退出登录' : '取消' }}</Button>
      <Button type="primary" @click="onConfirm">确定</Button>
    </template>
  </Modal>
</template>

<script>
  import { userStore } from '@/store/user'
  import userMgr from './index.js'
  import dt from '@dt/dt'
  import router from '@/router'
  export default {
    data() {
      const pwdValidate = (rule, value, callback) => {
        let reg = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,18}$/
        if (!reg.test(value)) return callback('密码长度需8-18位的数字、字母，且字母必须包含大小写')
        callback()
      }
      return {
        modal: false,
        isForce: false,
        title: '首次登录密码设置',
        info: { phone: '', password: '', confirmPwd: '' },
        rules: {
          userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: pwdValidate, trigger: 'blur' }
          ],
          confirmPwd: [{ required: true, message: '请重复密码', trigger: 'blur' }]
        }
      }
    },
    methods: {
      show(phone = userStore().info.phone, force = false) {
        this.info.phone = phone
        this.isForce = force
        this.modal = true
        this.title = this.isForce ? '请先设置登录密码' : '设置新密码'
      },
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let { phone, password, confirmPwd } = this.info
            if (confirmPwd !== password) dt.ui.Message.error('两次密码输入不一致，请重新输入')
            else
              userMgr.updatePwd({ phone, password, confirmPwd }).then(() => {
                dt.ui.Message.success(this.isForce ? '设置成功' : '修改成功')
                this.modal = false
                if (userStore().isLogin) {
                  userStore().update()
                }
                this.$emit('success')
              })
          }
        })
      },
      onClose() {
        this.modal = false
        if (this.isForce) router.goLogin()
      }
    }
  }
</script>

<style lang="scss" scoped></style>
